<template>

<h2>11</h2>
<table class="table table-bordered">
<tr>
    <th>房型名称</th>
    <th>
        <input type="text" v-model="Tianjia1.fname">
    </th>
</tr>
<tr>
  <th>  上传房型图片</th>
  <th>
    <img  :src="Tianjia1.fimg" style="height: 100px; width: 100px;">
    <input type="file"  @change="Upfile">
  </th>
</tr>
<tr>
    <th>房间大小</th>
    <th>
        <input type="text" v-model="Tianjia1.fnum">

    </th>
</tr>

        <tr>
            <th>房号</th>
            <th>
                <input type=" text" v-model="Tianjia1.hid">
            </th>
        </tr>
        <tr>
            <th></th>
            <th>
               <button @click="Tianjia">添加</button>
            </th>
        </tr>

</table>





</template>
<script setup lang="ts">



import axios from 'axios';
import { ref } from 'vue';

const Upfile=(e:any)=>{

    var a=e.target.files[0]
    var b =new FormData();

    b.append("iamge",a);

    axios.post('https://localhost:7158/api/UpFile/Upfile',b).then(res=>{


            if(res.data.id==-1)

            {
                alert('上传图片不能超过2mb')
            }
            else
        {
            console.log(res.data)
            alert(res.data.tiShi)
            Tianjia1.value.fimg=res.data.path

        }
           

    })



}



const Tianjia1= ref({


  "fname": "string",
  "fimg": "string",
  "hid": 0,
  "isDel": true,
  "fnum": 0

})



    const Tianjia=()=>{

        axios.post('https://localhost:7158/api/User/AddFangXing',Tianjia1.value).then(res=>{

            if(res.data==-1)
        {
            alert('房号只能绑定一个房间')
        }
        else if(res.data>0)
        {
            alert('添加成功')
        }
        else
        {
            alert('添加失败')
        }
        })

    }


</script>